import echarts from "echarts";

export default {
  data() {
    return {
      pieChart: null,
      timer: null,
    };
  },
  methods: {
    // 默认值为0
    renderPeiChart(data, index = 0) {
        console.log('data',data)
      let item = data[index];
      let option = {
        title: [
          {
            text:item.paid,
            x: "20%",
            y: "37%",
            textAlign: "center",
            textStyle: {
              fontSize: "30",
              fontWeight: "100",
              color: "#79ffff",
              textAlign: "center",
            },
          },
          {
            text: "已付",
            left: "20%",
            top: "51%",
            textAlign: "center",
            textStyle: {
              fontSize: "14",
              fontWeight: "400",
              color: "#5c5a68",
              textAlign: "center",
            },
          },
          {
            text: item.date,
            left: "20%",
            top: "59%",
            textAlign: "center",
            textStyle: {
              fontSize: "12",
              fontWeight: "400",
              color: "#484556",
              textAlign: "center",
            },
          },
           {
            text: item.payable,
            x: "75%",
            y: "37%",
            textAlign: "center",
            textStyle: {
              fontSize: "30",
              fontWeight: "100",
              color: "#79ffff",
              textAlign: "center",
            },
          },
          {
            text: "未付",
            left: "75%",
            top: "51%",
            textAlign: "center",
            textStyle: {
              fontSize: "14",
              fontWeight: "400",
              color: "#5c5a68",
              textAlign: "center",
            },
          },
          {
            text: item.date,
            left: "75%",
            top: "59%",
            textAlign: "center",
            textStyle: {
              fontSize: "12",
              fontWeight: "400",
              color: "#484556",
              textAlign: "center",
            },
          },
        ],
        backgroundColor: "#031d33",
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "45%"],
            center: ["20%", "50%"],
            hoverAnimation: true,
            z: 10,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: "#003359",
                 avoidLabelOverlap: false,
              },
            },
            label: {
              show: false,
            },
            data: [item.paid,item.total],
            labelLine: {
              show: false,
            },
          },
          {
            type: "pie",
            radius: ["40%", "45%"],
            center: ["75%", "50%"],
            hoverAnimation: true,
            z: 10,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: "#003359",
              },
            },
            label: {
              show: false,
            },
            data: [ item.payable,item.total],
            labelLine: {
              show: false,
            },
          },
        ],
      };
      this.peiChart.setOption(option);
      this.timer = setTimeout(() => {
        console.log(index);
        // 如果是最后一条数据，需要从0开始遍历
        if (index < data.length - 1) {
          this.renderPeiChart(data, index + 1);
        } else {
          // this.renderPieChart(data, 0)
          this.renderPeiChart(data);
        }
      }, 1500);
    },
  },
};
